import './ThreePublicFunds.less';

const threePublicFundsDefaultKey = 'threePublicFunds';

const ThreePublicFundsEditTableCell = {
    name: 'ThreePublicFundsEditTableCell',
    props: {
        record: {
            type: Object,
            default: () => ({}),
        },
        value: {
            default: () => ''
        },
        dataIndex: {
            type: String,
            default: () => ''
        }
    },
    data() {
        return {
            componentEdit: false,
            editValue: this.value
        }
    },
    methods: {
        editTableHandlerClick() {
            const RN = this.record.RN;
            const {editValue, dataIndex} = this;
            this.$emit('handlerClick', {
                RN,
                editValue,
                dataIndex
            });
            this.componentEdit = false;
        },
        editTableIconClick(value) {
            this.componentEdit = value;
        },
        editTableInputChange(e) {
            const {value} = e.target;
            this.editValue = value;
        }
    },
    render() {
        const {value} = this.$props;
        const {componentEdit, editTableIconClick, editValue, editTableHandlerClick, editTableInputChange} = this;

        const renderEditComponent = () => {
            if (!componentEdit) {
                return (
                    <div style={{
                        position: 'relative',
                    }}>
                        {value}
                        <a-icon class='edit-table-cell-icon' type='edit' onClick={() => editTableIconClick(true)}/>
                    </div>
                );
            } else {
                return (
                    <div>
                        <a-input
                            value={editValue}
                            onChange={editTableInputChange}
                            type='number'
                        />
                        <a-icon type="check" class="edit-table-cell-icon-check"
                                onClick={editTableHandlerClick}/>
                    </div>
                )
            }
        }

        return (
            <div>
                {renderEditComponent()}
            </div>
        )
    }
};

const ThreePublicFunds = {
    name: 'ThreePublicFunds',
    data() {
        return {
            [`${threePublicFundsDefaultKey}Data`]: [
                {
                    "reason": "基本支出追加",
                    "linkPhone": "",
                    "flag": "1",
                    "enterpriseGuid": 61438,
                    "year": 2021,
                    "enterpriseKind": "1",
                    "creatorId": "1474",
                    "divisionName": "行政事业科",
                    "remark": "基本支出追加",
                    "linkName": "",
                    "bMoney": 0,
                    "fileNo": "",
                    "programName": "人员类支出",
                    "adjustMoney": 123456,
                    "formGuid": "330620210124003374",
                    "divisionGuid": 90,
                    "applierName": "王圣盐【15968506868】",
                    "enterpriseName": "中共绍兴市柯桥区委办公室",
                    "cId": "",
                    "batchNumber": 8,
                    "enterpriseCode": 101001,
                    "suggestion": "",
                    "approvalState": 90,
                    "divisionText": "90 行政事业科",
                    "approvalTime": "2021-01-24 14:25:23",
                    "programTypeName": "人员类支出",
                    "sId": "jbzczj",
                    "instId": "422437143818272769",
                    "applier": "1474",
                    "enterpriseKindName": "行政",
                    "createTime": "2021-01-24 14:25:23",
                    "flagName": "基本支出",
                    "defKey": "jbzczj",
                    "guid": "330620210124003374",
                    "enterpriseText": "101001 中共绍兴市柯桥区委办公室",
                    "RN": 1
                }
            ],
            [`${threePublicFundsDefaultKey}Column`]: [
                {
                    "isUrlSpecial": false,
                    "edit": false,
                    "display": true,
                    "isRules": false,
                    "title": "序号",
                    "align": "center",
                    "ellipsis": true,
                    "dataIndex": "RN",
                    "showSearch": 0,
                    "width": 200,
                    "tableId": 12,
                    "isChange": 0
                },
                {
                    "isUrlSpecial": false,
                    "edit": true,
                    "display": true,
                    "isRules": false,
                    "title": "调整金额",
                    "align": "center",
                    "ellipsis": true,
                    "dataIndex": "adjustMoney",
                    "showSearch": 0,
                    "width": 200,
                    "tableId": 12,
                    "isChange": 0
                },
                {
                    "isUrlSpecial": false,
                    "edit": false,
                    "display": true,
                    "isRules": false,
                    "title": "单据编码",
                    "align": "center",
                    "ellipsis": true,
                    "dataIndex": "formGuid",
                    "showSearch": 0,
                    "width": 200,
                    "tableId": 12,
                    "isChange": 0
                },
                {
                    "isUrlSpecial": false,
                    "edit": false,
                    "display": true,
                    "isRules": false,
                    "title": "情况说明",
                    "align": "center",
                    "ellipsis": true,
                    "dataIndex": "reason",
                    "showSearch": 0,
                    "width": 200,
                    "tableId": 12,
                    "isChange": 0
                },
                {
                    "isUrlSpecial": false,
                    "edit": false,
                    "display": true,
                    "isRules": false,
                    "title": "文号",
                    "align": "center",
                    "ellipsis": true,
                    "dataIndex": "fileNo",
                    "showSearch": 0,
                    "width": 200,
                    "tableId": 12,
                    "isChange": 0
                },
                {
                    "isUrlSpecial": false,
                    "edit": false,
                    "display": true,
                    "isRules": false,
                    "title": "预算项目",
                    "align": "center",
                    "ellipsis": true,
                    "dataIndex": "programName",
                    "showSearch": 0,
                    "width": 200,
                    "tableId": 12,
                    "isChange": 0
                },
                {
                    "isUrlSpecial": false,
                    "edit": false,
                    "display": true,
                    "isRules": false,
                    "title": "归口",
                    "align": "center",
                    "ellipsis": true,
                    "dataIndex": "divisionName",
                    "showSearch": 0,
                    "width": 200,
                    "tableId": 12,
                    "isChange": 0
                },
                {
                    "isUrlSpecial": false,
                    "edit": false,
                    "display": true,
                    "isRules": false,
                    "title": "单位",
                    "align": "center",
                    "ellipsis": true,
                    "dataIndex": "enterpriseName",
                    "showSearch": 0,
                    "width": 200,
                    "tableId": 12,
                    "isChange": 0
                },
                {
                    "isUrlSpecial": false,
                    "edit": false,
                    "display": true,
                    "isRules": false,
                    "title": "单位性质",
                    "align": "center",
                    "ellipsis": true,
                    "dataIndex": "enterpriseKindName",
                    "showSearch": 0,
                    "width": 200,
                    "tableId": 12,
                    "isChange": 0
                },
                {
                    "isUrlSpecial": false,
                    "edit": false,
                    "display": true,
                    "isRules": false,
                    "title": "申请人",
                    "align": "center",
                    "ellipsis": true,
                    "dataIndex": "applierName",
                    "showSearch": 0,
                    "width": 200,
                    "tableId": 12,
                    "isChange": 0
                },
                {
                    "isUrlSpecial": false,
                    "edit": false,
                    "display": true,
                    "isRules": false,
                    "title": "创建时间",
                    "align": "center",
                    "ellipsis": true,
                    "dataIndex": "approvalTime",
                    "showSearch": 0,
                    "width": 200,
                    "tableId": 12,
                    "isChange": 0
                }
            ],
        }
    },
    components: {
        ThreePublicFundsEditTableCell
    },
    created() {

    },
    methods: {
        getTableData() {
            //调取tableData数据接口;
        },
        handlerClick({
            RN, editValue, dataIndex
                     }) {
            const dataSource = [...this[`${threePublicFundsDefaultKey}Data`]];
            const changeData = dataSource.find(data => data.RN === RN);
            if(changeData) {
                changeData[dataIndex] = editValue;
                this[`${threePublicFundsDefaultKey}Data`] = dataSource;
            }
        }
    },
    render() {
        const customRenderColumn = this[`${threePublicFundsDefaultKey}Column`].map(column => {
            if (!column.edit) {
                return column;
            }
            return {
                ...column,
                customRender: (value, record) => {
                    return (
                        <ThreePublicFundsEditTableCell
                            record={record}
                            value={value}
                            onhandlerClick={this.handlerClick}
                            dataIndex={column.dataIndex}
                        />
                    )
                }
            }
        });
        return (
            <a-table
                dataSource={this[`${threePublicFundsDefaultKey}Data`]}
                columns={customRenderColumn}
                rowKey={(record) => record.RN}
                scroll={{
                    x: 100,
                    y: '100%'
                }}
            />
        )
    }
};

export default ThreePublicFunds;
